<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <p:panel styleClass="imgHeader generalInputFormPanel" rendered="#{managerView.activePanel == 'NEW_SECTION'}">
        <f:facet name="header">
            <h:graphicImage library="images" name="subject-16.png" style="margin-top: 2px" />
            <h:outputText styleClass="title" value="#{msg['managerPage.sectionManagement.newSection.title']}" />
        </f:facet>

        <h:panelGrid id="editSectionPanel" columns="2" styleClass="inputDataFields" columnClasses="label,value">
            <h:outputText value="#{msg['managerPage.sectionManagement.name']}" />
            <h:panelGroup>
                <p:inputText id="sectionName" value="#{sectionManager.newOrModifiedSectionBean.sectionName}" required="true" requiredMessage="#{msg['managerPage.sectionManagement.name.requiredMsg']}" />
                <p:message for="sectionName" />
            </h:panelGroup>
            <h:outputText value="#{msg['managerPage.sectionManagement.code']}" />
            <p:inputText value="#{sectionManager.newOrModifiedSectionBean.sectionCode}" />
        </h:panelGrid>
        <h:panelGroup layout="block" id="managerAssignment" styleClass="pickListComponent">
            <h:outputText value="#{msg['managerPage.sectionManagement.managerAssignment']}:" />
            <h:panelGrid columns="2" styleClass="layout" cellspacing="0" cellpadding="0">
                <p:selectOneMenu value="#{sectionManager.filteredGroup}" converter="#{sectionManager.groupConverter}">
                    <f:selectItem itemLabel="#{msg['managerPage.sectionManagement.managerAssignment.groupFilter']}" itemValue="#{null}" />
                    <f:selectItems value="#{sectionManager.groups}" var="group" itemLabel="#{group.groupName}" itemValue="#{group}" />
                    <p:ajax process="@this" update="managerAssignment" event="change" />
                </p:selectOneMenu>
                <h:panelGroup>
                    <h:outputText value="#{msg['managerPage.sectionManagement.managerAssignment.assignedManagers']}:" />
                    <p:commandButton action="#{sectionManager.removeAllAssignedManager}" value="#{msg['managerPage.sectionManagement.managerAssignment.removeAll']}"
                                     process="@this" update=":#{p:component('managerAssignment')}" styleClass="remove" icon="remove" />
                </h:panelGroup>
                <p:selectManyMenu value="#{sectionManager.selectedManagers}" var="m" converter="#{sectionManager.sectionManagerConverter}">
                    <f:selectItems value="#{sectionManager.assignableSectionManagers}" var="manager" itemLabel="#{manager.firstname} #{manager.lastname} (#{manager.username})" itemValue="#{manager.username}" />
                    <p:column>
                        <h:graphicImage library="images" name="user.png" />
                    </p:column>
                    <p:column>
                        <h:outputText value="#{sectionManager.getUsernameForSelectComponent(m)}" />
                    </p:column>
                    <p:ajax process="@this" update="managerAssignment" event="change" />
                </p:selectManyMenu>
                <p:dataGrid id="assignedManagers" value="#{sectionManager.assignedSectionManagers}" var="selectedManager" columns="3"
                            emptyMessage="#{msg['managerPage.sectionManagement.managerAssignment.noManagersAssigned']}..."
                            binding="#{sectionManager.assignedManagersUIComponent}">
                    <h:panelGroup>
                        <p:selectBooleanCheckbox value="#{selectedManager.checked}">
                            <p:ajax listener="#{sectionManager.selectLeaderManager(selectedManager)}" process="@this" update="assignedManagers" />
                        </p:selectBooleanCheckbox>
                        <h:panelGroup styleClass="ui-widget ui-state-default assignedManager">
                            <h:graphicImage library="images" name="user.png" />
                            <h:outputText value="#{selectedManager.user.firstname} #{selectedManager.user.lastname} (#{selectedManager.user.username})" />
                            <p:commandLink action="#{sectionManager.removeAssignedManager(selectedManager)}" process="@this" update=":#{p:component('managerAssignment')}"
                                           styleClass="remove" title="#{msg['managerPage.sectionManagement.managerAssignment.remove']}" />
                        </h:panelGroup>
                    </h:panelGroup>
                </p:dataGrid>
            </h:panelGrid>
            <p:message for="assignedManagers" showSummary="true" showDetail="false" />
        </h:panelGroup>
        <div class="buttonsPanel">
            <p:commandButton value="#{msg['Common.save']}" action="#{sectionManager.save}" icon="save" update="@form" rendered="#{sectionManager.newOrModifiedSectionBean.sectionId == null}" />
            <p:commandButton value="#{msg['Common.update']}" action="#{sectionManager.save}" icon="save" update="@form" rendered="#{sectionManager.newOrModifiedSectionBean.sectionId != null}" />
            <p:commandButton value="#{msg['Common.cancel']}" action="#{managerView.switchPanel('DESCRIPTION')}" update="@form" icon="cancel" process="@this" >
                <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener"/>
            </p:commandButton>
        </div>
    </p:panel>
</ui:composition>